<template>
    <div class="index">
        <header>
          <ul class="nav">
            <li>首页</li>
            <li>
              <van-cell is-link @click="showPopup"><i class="yo-ico">&#xe7f9;</i></van-cell>
              <van-popup v-model="show"
              closeable ="false" 
              close-icon="close"
              position="bottom" 
              :style="{ height: '94%'  }">
            <h4>选择领域</h4>
            <div class="classify">
              <div><p>医疗健康</p></div>
              <div><p>新媒体</p></div>
              <div><p>娱乐</p></div>
              <div><p>AI</p></div>
              <div><p>人工智能</p></div>
              <div><p>大数据</p></div>
              <div><p>社交</p></div>
              <div><p>时政新闻</p></div>
              <div><p>医疗健康</p></div>
              <div><p>金融投资</p></div>
              <div><p>股票证券</p></div>
              <div><p>硬件</p></div>
              <div><p>互联网</p></div>
              <div><p>教育</p></div>
            </div>
            </van-popup>
            </li>
            <li
            @click="handleTabClick('/Index/Sourch')">
              <i class="yo-ico">&#xe680;</i>
            </li>
          </ul>
        </header>
        <div class='lunbo'>
        <van-swipe 
            class="my-swipe" 
            :autoplay="3000"
            :show-indicators="false"
            style="height:1.7rem">
            <van-swipe-item><img src="../../../assets/img/1.png"></van-swipe-item>
            <van-swipe-item><img src="../../../assets/img/2.png"></van-swipe-item>
            <van-swipe-item><img src="../../../assets/img/3.png"></van-swipe-item>
        </van-swipe>
        </div>
           <div class="new">
             <Newbox></Newbox>
             <Newbox></Newbox>
           </div>
         <div class="slidebox">
           <ul>
              <li>
                <span><i class="yo-ico">&#xe630;</i></span>
                <img src="../../../assets/img/6.png">
                <p>全栈工程师线下培训课程</p>
              </li>
           </ul>
         </div>
            <Newbox ></Newbox>
            <Newbox ></Newbox>
     </div>
     
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Popup } from 'vant';
import Newbox from '../main/Newbox'

Vue.use(Popup);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
 
  components: {
   Newbox
  },
   data(){
     return{
       show:false,
     }
  },
  methods:{
      showPopup() {
      this.show = true;
    },
    handleTabClick(path) {
      this.$router.push(path)
    }
  }
} 
</script>

<style>
    .my-swipe .van-swipe-item {
      font-size: .2rem;
      line-height: 1.3rem;
      text-align: center;
      border-radius: .1rem;
    }
</style>
<style lang="stylus" scoped>
@import '../../../assets/stylus/border.styl';
.index
  width 100%
  padding 0 0.1rem 0 0.1rem
  overflow scroll
  header
    z-index 1
    position fixed
    height .44rem
    background-color white
    width 95%
    .nav
      display flex  
      flex-direction row
      font-weight 600

      li:first-child
        color #333333
        flex 287
        line-height .44rem
        font-size .32rem
        text-aline center
        padding-left .1rem
        
      
      li:nth-child(2)
        flex 44
        font-size .28rem
        line-height .44rem
        color #333333
        h4
          font-size .21rem
          margin-left: .1rem
        .classify
          width: 93%
          margin-left: .1rem
          border-top .01rem solid 
          border-color #cccccc,
          flex 1
          div 
            display: inline-block
            width: 1.03rem
            height: .5rem
            border .01px solid
            border-color #6b9cff
            border-radius .1rem
            margin-right: .09rem
            margin-left: .07rem
            margin-top: .22rem
            
            
            p
            font-size .14rem
            text-align center
            line-height .51rem
            width: 1rem
            color: #6b9cff
            


      li:last-child
        flex 44
        line-height .44rem
        text-align center
        font-size .28rem
        color #333333
        margin-right 0
  
  .lunbo
    margin-top  .44rem
    height 1.2rem
    width 100%
  .new 
    width 100%
    margin-top .5rem
  .newbox
    display flex
    height 1.4rem
    padding .20rem .05rem 
    border_1px(0 0 1px 0)
    div:first-child
        width 50%
        margin-right .25rem
        p
           margin-top .4rem
           font-size .1rem
           color #CCCCCC
           span
              margin-left .35rem
        
  .slidebox
    width: 100%
    height 1.2rem
    padding-top .1rem
    ul
        display flex
        width max-content
        li
          padding-right .12rem
          position: relative
          &:last-child
            padding-right 0
          span
            position: absolute
            color: #FFFFFF
            margin: .1rem 0 0 .1rem
          img
            width 1.4rem
            height .94rem
          p
            font-style:  .14rem
            word-wrap: break-word
            word-break: break-all
            overflow: hidden
            line-height .18rem
            width 1.12rem
            margin-left: .1rem

</style>

